<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 600px;
            height: 450px;
            margin: 100px auto;
            /*border: 1px solid red;*/
        }

        div ul li {
            float: left;
            list-style: none;
            border: 2px solid aqua;
            width: 25px;
            height: 25px;
            margin: -5px 50px 0px;
            text-align: center;
            line-height: 25px;
            cursor: pointer; /*鼠标放在图片上现在手的形状*/
            border-radius: 50%;
            transition: 2s all;
        }

        img {
            width: 600px;
            height: 400px;
            cursor: pointer; /*鼠标放在图片上现在手的形状*/
        }
    </style>
    <script>
        //页面加载完成 再执行函数
        window.onload = init;
        var dingshiqi;
        var i = 1
        //定时器 每一秒执行一次
        function init() {
            dingshiqi = window.setInterval("fn()", 1500);
        }
        //循环函数
        function fn() {
            i++;
            if (i > 4) {
                i = 1;
            }
            //获取img的id
            var obj = document.getElementById("img1");
            ys();
            //定义图片路径
            obj.src = "images/" + i + ".jpg";
            var yanse = document.getElementById("li"+i);
            yanse.style.background = "red";

        }
        //鼠标停在图片上 图片停止轮播
        function stop() {
            window.clearInterval(dingshiqi);
        }
        //鼠标离开图片 图片又开始轮播
        function start() {
            //重新给定时器赋名字
            dingshiqi = window.setInterval("fn()", 1000);
            //利用for循环 赋值id
        }
        function tingz(n, m) {
            //n赋值给i 使n和i同步
            i = n;
            var obj = document.getElementById("img1");
            obj.src = "images/" + n + ".jpg"
            for (var j = 1; j <= 4; j++) {
                var ob = document.getElementById("li"+j);
                ob.style.background = "white";
            }
            window.clearInterval(dingshiqi);
            m.style.background = "red";
        }
        function ys() {
            for (var j = 1; j <= 4; j++) {
                var ob = document.getElementById("li"+j);
                ob.style.background = "white";
            }
        }
    </script>
</head>
<body>
<div>
    <img id="img1" src="images/1.jpg" onmouseover="stop()" onmouseout="start()">
    <ul id="ul1">
        <li id="li1" onmousemove="tingz(1,this)" onmouseout="start()" style="background: red"></li>
        <li id="li2" onmousemove="tingz(2,this)" onmouseout="start()"></li>
        <li id="li3" onmousemove="tingz(3,this)" onmouseout="start()"></li>
        <li id="li4" onmousemove="tingz(4,this)" onmouseout="start()"></li>
    </ul>
</div>
</body>
</html>